<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('首页')"/>
    <link rel="stylesheet" th:href="@{/static/admin/css/other/console1.css}"/>
</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">外出报备（人次）</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4"
                             th:text="${wcbbs}">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <i class="layui-icon layui-icon-release" style="font-size:45px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">来访统计（人次）</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;"
                             th:text="${lfdjs}">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <i class="layui-icon layui-icon-list" style="font-size:55px;"></i>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">疫苗接种人员统计（人）</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;"
                             th:text="${ymCount}">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4  top-panel-tips">
                            <i class="layui-icon layui-icon-vercode" style="font-size:45px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">运行时长</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1" th:text="${service.runTime}">
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg id="Layer_1" height="512" viewBox="0 0 48 48" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m34.206 38.585a.75.75 0 0 1 -.75-.75v-1.359h-3.723a.751.751 0 0 1 -.612-1.184l4.473-6.309a.75.75 0 0 1 1.362.434v5.559h.73a.75.75 0 1 1 0 1.5h-.73v1.359a.75.75 0 0 1 -.75.75zm-3.021-3.609h2.271v-3.2z" fill="#585f76"/><path d="m36.961 38.585a.75.75 0 0 1 -.7-1.027l3.452-8.69a.75.75 0 0 1 1.394.553l-3.452 8.691a.75.75 0 0 1 -.694.473z" fill="#585f76"/><path d="m43.407 38.584h-.078a.751.751 0 0 1 -.669-.823 15.08 15.08 0 0 1 1.2-4.191 19.926 19.926 0 0 1 1.887-3.213h-3.624a.75.75 0 0 1 0-1.5h5.127a.75.75 0 0 1 .58 1.225 21.751 21.751 0 0 0 -2.6 4.1 13.865 13.865 0 0 0 -1.078 3.735.75.75 0 0 1 -.745.667z" fill="#585f76"/><path d="m28.761 38.585h-4.961a.752.752 0 0 1 -.75-.723 3.582 3.582 0 0 1 1.306-2.716 23.024 23.024 0 0 1 1.883-1.341 10.6 10.6 0 0 0 1.026-.724 1.944 1.944 0 0 0 .581-1.318 1.733 1.733 0 0 0 -.462-1.178 1.476 1.476 0 0 0 -1.1-.418 1.57 1.57 0 0 0 -1.732 1.7.75.75 0 0 1 -1.5 0 3.047 3.047 0 0 1 3.232-3.2 2.956 2.956 0 0 1 2.175.87 3.249 3.249 0 0 1 .889 2.262 3.44 3.44 0 0 1 -1.052 2.372 10.072 10.072 0 0 1 -1.228.886 21.214 21.214 0 0 0 -1.768 1.249 2.061 2.061 0 0 0 -.591.779h4.048a.75.75 0 1 1 0 1.5z" fill="#585f76"/><path d="m19.729 8.958a.75.75 0 0 0 .75-.75v-3.187a.749.749 0 0 0 -.75-.75 19.729 19.729 0 0 0 0 39.458.749.749 0 0 0 .75-.75v-3.187a.75.75 0 0 0 -1.5 0v2.422a18.07 18.07 0 0 1 -7.7-2.084l1.2-2.078a.75.75 0 1 0 -1.3-.75l-1.2 2.076a18.358 18.358 0 0 1 -5.643-5.629l2.085-1.2a.75.75 0 0 0 -.75-1.3l-2.087 1.207a18.12 18.12 0 0 1 -2.047-7.706h2.4a.75.75 0 1 0 0-1.5h-2.4a18.12 18.12 0 0 1 2.047-7.706l2.094 1.209a.75.75 0 0 0 .75-1.3l-2.085-1.2a18.358 18.358 0 0 1 5.643-5.631l1.2 2.076a.75.75 0 1 0 1.3-.75l-1.2-2.078a18.07 18.07 0 0 1 7.7-2.084v2.422a.75.75 0 0 0 .743.75z" fill="#585f76"/><g fill="#f99e4d"><path d="m14.333 28.555a.75.75 0 0 1 -.434-1.363l5.08-3.581v-9.1a.75.75 0 1 1 1.5 0v9.489a.749.749 0 0 1 -.317.613l-5.4 3.805a.747.747 0 0 1 -.429.137z"/><circle cx="24.647" cy="5.667" r=".753"/><circle cx="29.22" cy="7.567" r=".753"/><circle cx="33.144" cy="10.576" r=".753"/><circle cx="36.162" cy="14.508" r=".753"/><circle cx="38.063" cy="19.087" r=".753"/><circle cx="38.707" cy="24.005" r=".753"/></g></svg>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-card-header">外出报备</div>
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <form action="" class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label" for="year">年份</label>
                                <div class="layui-input-inline" id="year">
                                    <select lay-verify="required" name="year">
                                        <option value="2022">2022年</option>
                                        <option value="2021">2021年</option>
                                        <option value="2020">2020年</option>
                                    </select>
                                </div>
                                <button class="layui-btn layui-btn-primary" lay-filter="form1" lay-submit>查询</button>
                            </div>
                        </form>
                        <div id="echarts-records1"
                             style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>

            </div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-card-header">来访登记</div>
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <form action="" class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label" for="year">年份</label>
                                <div class="layui-input-inline" id="year">
                                    <select lay-verify="required" name="year">
                                        <option value="2022">2022年</option>
                                        <option value="2021">2021年</option>
                                        <option value="2020">2020年</option>
                                    </select>
                                </div>
                                <button class="layui-btn layui-btn-primary" lay-filter="form2" lay-submit>查询</button>
                            </div>
                        </form>
                        <div id="echarts-records2"
                             style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">动态</div>
                <div class="layui-card-body">
                    <dl class="layuiadmin-card-status">
                        <dd th:each="list : ${sysOperLog} ">
                            <div class="layui-status-img">
                                <a href="javascript:;">
                                    <img style="width: 32px;height: 32px;border-radius: 50px;"
                                         th:src="@{/static/admin/images/avatar.jpg}">
                                </a>
                            </div>
                            <div>
                                <p>[[${list.operName}]] 操作了 【 [[${list.title}]] 】
                                    数据为:
                                <pre class="layui-code" lay-skin="notepad">[[${list.operParam}]]</pre>
                                </p>
                                <span>[[${list.getdate()}]]</span>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">系统公告</div>
                <div class="layui-card-body">
                    <ul class="list">
                        <li class="list-item" th:each="list : ${sysNotices} "><span class="title"
                                                                                    th:text="${list.title}">优化代码格式</span><span
                                class="footer" th:text="${list.getdate()}">2020-06-04 11:28</span></li>
                    </ul>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">
                    防疫链接发布
                </div>
                <div class="layui-card-body" th:each="list:${urls}">

                    <a target="_blank" th:href="${list.url}" class="pear-btn layui-btn-fluid" th:text="${list.title}"
                       style="height: 50px;line-height: 50px;"></a>
                    <br/>

                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['layer', 'echarts', 'element', 'count', 'topBar', 'code', 'form'], function () {
        layui.code();
        let form = layui.form;
        // let count = layui.count,
        echarts = layui.echarts;

        let MODULE_PATH = rootPath + "/ServiceController/";
        var echartsRecords1 = echarts.init(document.getElementById('echarts-records1'), 'walden');
        var echartsRecords2 = echarts.init(document.getElementById('echarts-records2'), 'walden');

        var option1 = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [{
                type: 'category',
                data: [],
                axisLine: {
                    lineStyle: {
                        color: "#999"
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                splitNumber: 4,
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#DDD'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#333"
                    },
                },
                nameTextStyle: {
                    color: "#999"
                },
                splitArea: {
                    show: false
                }
            }],
            series: [{
                name: '外出报备人数',
                type: 'line',
                data: [],
                lineStyle: {
                    normal: {
                        width: 8,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                offset: 0,
                                color: '#A9F387' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#48D8BF' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(72,216,191, 0.3)',
                        shadowBlur: 10,
                        shadowOffsetY: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff',
                        borderWidth: 10,
                        borderColor: "#A9F387"
                    }
                },
                smooth: true
            }]
        };
        var option2 = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [{
                type: 'category',
                data: [],
                axisLine: {
                    lineStyle: {
                        color: "#999"
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                splitNumber: 4,
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#DDD'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#333"
                    },
                },
                nameTextStyle: {
                    color: "#999"
                },
                splitArea: {
                    show: false
                }
            }],
            series: [{
                name: '来访报备人数',
                type: 'line',
                data: [],
                lineStyle: {
                    normal: {
                        width: 8,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                offset: 0,
                                color: '#A9F387' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#48D8BF' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(72,216,191, 0.3)',
                        shadowBlur: 10,
                        shadowOffsetY: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff',
                        borderWidth: 10,
                        borderColor: "#A9F387"
                    }
                },
                smooth: true
            }]
        };
        echartsRecords1.setOption(option1);
        echartsRecords2.setOption(option2);
        getDate(MODULE_PATH + 'wcc', 2022, echartsRecords1);
        getDate(MODULE_PATH + 'lf', 2022, echartsRecords2);
        form.on('submit(form1)', function (data) {
            getDate(MODULE_PATH + 'wcc', data.field.year, echartsRecords1);
            return false;
        });
        form.on('submit(form2)', function (data) {
            getDate(MODULE_PATH + 'lf', data.field.year, echartsRecords2);
            return false;
        });

        window.onresize = function () {
            echartsRecords1.resize();
            echartsRecords2.resize();
        }

    });

    function getDate(url, year, echarts) {
        $.ajax({
            url: url,
            type: 'GET',
            data: {'year': year},
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    let arr = res.data;
                    arr1 = []
                    arr2 = []
                    $.each(arr, function (k, v) {
                        arr1[k] = v.month
                        arr2[k] = v.count
                    })
                    echarts.setOption({
                        xAxis: [{
                            data: arr1
                        }],
                        series: [{
                            data: arr2
                        }]
                    })
                    // console.log(arr1)
                }
            }
        })
    }
</script>
</body>
</html>
